<template>
  <div>
    <el-form class="formDiv" :inline="true" :model="form" label-width="150px">
      <el-form-item label="统一社会信用代码">
        <el-input class="inputStype" v-model="form.usci" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="纳税人识别号">
        <el-input class="inputStype" v-model="form.taxpayer" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="法定代表人">
        <el-input class="inputStype" v-model="form.legal" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="成立时间">
        <el-date-picker class="inputStype" v-model="form.setup_time" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择"></el-date-picker>
      </el-form-item>
      <el-form-item label="审核/年检日期">
        <el-date-picker class="inputStype" v-model="form.annual_time" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择"></el-date-picker>
      </el-form-item>
      <el-form-item label="注册资本">
        <el-input class="inputStype" v-model="form.reg_money" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="注册地址">
        <el-input class="inputStype" v-model="form.reg_address" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="登记机关">
        <el-input class="inputStype" v-model="form.reg_organ" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="经营范围">
        <el-input class="jingyingInput" v-model="form.sale_range" placeholder="请输入"></el-input>
      </el-form-item>

    </el-form>

    <div class="buttonLeft">

      <el-button class="btnColse" @click="cancel">取消</el-button>
      <el-button class="btnPay" type="primary" @click="save">保存</el-button>

    </div>

  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "aptitude",
  computed: {
    ...mapState([
      "userInfo",
    ]),
  },
  data() {
    return {
      form: {
        usci: '',
        taxpayer: '',
        legal: '',
        setup_time: '',
        annual_time: '',
        reg_money: '',
        reg_address: '',
        reg_organ: '',
        sale_range: ''
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$httpApi("/api/userInfo", {
        token: this.userInfo.token
      }, 'get').then(res => {
        console.log(res)
        this.form = res.data.zizhiInfo;
      })
    },
    save() {
      this.$httpApi("/api/qualityInfoSave", {
        ...this.form,
        token: this.userInfo.token
      }, 'post').then(res => {
        if (res.code == 200) {
          alertSucc('保存成功');
        } else {
          alertErr(res.msg)
        }
      });
  },
  cancel() {
    this.$emit('cancel');
  }
}
}
</script>

<style lang="less" scoped>
.formDiv {
  margin-top: 63px;
}

.jingyingInput {
  width: 693px;
}

.inputStype {
  width: 260px;

}

.btnPay {
  width: 133px;
  height: 40px;
  background: #0052D9;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(0, 0, 0, 0);
  margin-top: 10px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;

  font-style: normal;
  text-transform: none;
}

.btnColse {
  width: 133px;
  height: 40px;
  background: #F5F5F5;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #D7D7D7;

  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  margin-left: 166px;

  font-style: normal;
  text-transform: none;
}

/deep/ .el-textarea__inner {
  width: 930px;
  background: #FAFAFA;
  border-radius: 4px 4px 4px 4px;
}

/deep/ .el-input__inner {
  background: #FAFAFA;
  border-radius: 4px 4px 4px 4px;
}
</style>